<template>
  <div class="user_list">
    <div class="searchFrom">
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form :inline="true" class="demo-form-inline" :model="ruleForm" :rules="rules" ref="ruleFormRef">
            <el-form-item label="用户名" prop="fUserAccount">
              <el-input placeholder="请输入用户名" v-model="ruleForm.fUserAccount" size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="selectUserList">查询</el-button>
              <el-button type="default" size="small" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="small" @click="dialogUserAddVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="usetListData" style="width:99%">
      <el-table-column prop="f_user_account" label="用户名"></el-table-column>
      <el-table-column prop="f_user_real_name" label="真实姓名"></el-table-column>
      <el-table-column prop="f_user_photo" label="用户头像">
        <template #default="scope">
          <img class="avatar" :src="scope.row.f_user_photo" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="f_user_sex" label="性别">
        <template #default="scope">
          <span v-if="scope.row.f_user_sex === '1'">男</span>
          <span v-else-if="scope.row.f_user_sex === '2'">女</span>
          <span v-else>保密</span>
        </template>
      </el-table-column>
      <el-table-column prop="f_user_card_id" label="证件号"></el-table-column>
      <el-table-column prop="f_user_mobile" label="手机号"></el-table-column>
      <el-table-column prop="f_user_email" label="邮箱"></el-table-column>
      <el-table-column prop="f_remark" label="备注信息"></el-table-column>
      <el-table-column prop="f_state" label="状态">
        <template #default="scope">
          <span v-if="scope.row.f_state === '1'">正常</span>
          <span v-else>禁止登陆</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <div v-if="scope.row.f_is_super === '1'">
            超级管理员
          </div>
          <div v-else>
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 30, 40, 50, 100, 200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
      </el-pagination>
    </div>
  </div>
  <el-dialog title="添加用户" v-model="dialogUserAddVisible">
    <Useradd @sendToParent="sendToParent"></Useradd>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, ref } from 'vue'
import Useradd from './useradd.vue'
import { User } from '../../api/apiConfig'

export default defineComponent({
  components: {
    Useradd,
  },
  setup() {
    // let UsetListData = ref([])
    // const getUserList = () => {
    //   let params = {}
    //   User.getUserList(params).then((res: any) => {
    //     if (res.statusCode === 200) {
    //       UsetListData.value = res.data
    //     }
    //   })
    // }
    // onMounted(() => {
    //   getUserList()
    // })
    // return {
    //   UsetListData,
    // }

    let ruleFormRef = ref()
    let dialogUserAddVisible = ref(false)
    let userList = reactive({
      usetListData: [],
      totalPage: 0,
      pageNum: 1,
      pageSize: 10,
    })
    let ruleForm = reactive({
      fUserAccount: '',
    })
    let rules = reactive({
      fUserAccount: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
    })
    const getUserList = (getUserListParams) => {
      User.getUserList(getUserListParams).then((res: any) => {
        if (res.statusCode === 200) {
          userList.usetListData = res.data.userList
          userList.totalPage = Number(res.data.count)
        }
      })
    }
    const handleSizeChange = (val) => {
      userList.pageSize = val
      let getUserListParams = {
        fName: ruleForm.fUserAccount,
        pageNum: userList.pageNum,
        pageSize: userList.pageSize,
      }
      getUserList(getUserListParams)
    }

    const handleCurrentChange = (val) => {
      userList.pageNum = val
      let getUserListParams = {
        fName: ruleForm.fUserAccount,
        pageNum: userList.pageNum,
        pageSize: userList.pageSize,
      }
      getUserList(getUserListParams)
    }

    onMounted(() => {
      let getUserListParams = {
        fName: ruleForm.fUserAccount,
        pageNum: userList.pageNum,
        pageSize: userList.pageSize,
      }
      getUserList(getUserListParams)
    })

    const selectUserList = () => {
      let getUserListParams = {
        fName: ruleForm.fUserAccount,
        pageNum: userList.pageNum,
        pageSize: userList.pageSize,
      }
      getUserList(getUserListParams)
    }
    const resetForm = () => {
      ruleFormRef.value.resetFields()
      let getUserListParams = {
        fName: ruleForm.fUserAccount,
        pageNum: userList.pageNum,
        pageSize: userList.pageSize,
      }
      getUserList(getUserListParams)
    }
    const sendToParent = (newDialogUserAddVisible) => {
      dialogUserAddVisible.value = newDialogUserAddVisible
    }
    return {
      ...toRefs(userList),
      ruleForm,
      rules,
      handleSizeChange,
      handleCurrentChange,
      selectUserList,
      resetForm,
      ruleFormRef,
      dialogUserAddVisible,
      sendToParent,
    }
  },
})
</script>

<style scoped lang="scss">
.searchFrom {
  padding: 10px 10px 0 10px;
}
.paginationBox {
  margin: 30px 0;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
}
</style>